<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>JQueryAjax</title>
		<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
	</head>

	<body>
		用户名:<input type="text" id="username" name="username" /><br> 密码:
		<input type="password" id="password" name="password" /><br>
		<button type="button" class="butn">ajax提交</button><br>
		<span class="con"></span>
		<script type="text/javascript">
			$(document).ready(function() {
				$(".butn").click(function() {
					var username = $("#username").val();
					var password = $("#password").val();
					$.ajax({
						url: "ajax.php",
						type: "POST",
						data: {
							name: username,
							pwd: password
						},
						dataType: "json",
						error: function() {
							alert('Error loading XML document');
						},
						success: function(data, status) { //如果调用php成功 
							alert(status);
							alert(data);
							$('.con').html("用户名:" + data[0] + ",密码:" + data[1]);
						}
					});
				})
			})
		</script>
	</body>

</html>